<template>
  <div>
    <div id="title">
      <panle title="风险因素表" content="风险因素表"></panle>
    </div>
    <div id="search" class="pt20">
      <Search
        @setSearchForm="setSearchForm"
        @changeSearchForm="changeSearchForm"
        :searchForm="searchForm"
        :searchFormObject="searchFormObject"
        :searchOptions="searchOptions"
      ></Search>
    </div>
    <div id="searchbar" class="pt20">
      <el-button size="mini" @click="init()">刷新</el-button>
      <PersButton
        type="primary"
        size="mini"
        perms="data:questionaires:button-add"
        label="添加"
        @click="add"
      ></PersButton>
      <el-button size="mini" type="primary" @click="getexport()"
        >导出</el-button
      >
    </div>

    <div id="body">
      <el-table :data="tableData" border ref="container" style="width: 100%">
        <el-table-column
          :key="index"
          v-for="(item, index) in fieldList"
          :prop="item.field_name"
          :label="item.show_name"
          :min-width="item.width"
          align="center"
          v-if="item.is_show"
        >
          <template slot-scope="scope">
            <template v-if="item.field_name == 'supervise'">
              <span v-if="scope.row.supervise == 1">筛查知情同意书</span>
              <span v-else>管理知情同意书</span>
            </template>
            <template v-else-if="item.field_name == 'years'">
              {{ scope.row[item.field_name] }}
            </template>
            <template v-else>{{ scope.row[item.field_name] }}</template>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="200px">
          <template slot="header" slot-scope="scope">
            <span>操作</span>
            <el-popover class="upload-demo" trigger="click" width="100">
              <div :key="index" v-for="(item, index) in fieldList">
                <el-checkbox
                  @change="(checked) => checkBoxStatus(checked, item)"
                  v-if="item.is_show == 1"
                  :checked="true"
                  >{{ item.show_name }}
                </el-checkbox>
                <el-checkbox
                  @change="(checked) => checkBoxStatus(checked, item)"
                  v-else
                >
                  {{ item.show_name }}
                </el-checkbox>
              </div>
              <i
                class="el-icon-setting"
                slot="reference"
                style="padding-left: 10px"
              ></i>
            </el-popover>
          </template>
          <template #default="scope">
            <PersButton
              type="warning"
              size="mini"
              label="修改"
              icon="fa  fa-pencil"
              perms="data:questionaires:button-edit"
              @click="edit(scope.row)"
            ></PersButton>
            <PersButton
              type="danger"
              size="mini"
              icon="el-icon-delete"
              perms="data:questionaires:button-del"
              label="删除"
              @click="del(scope.row)"
            ></PersButton>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div id="page">
      <el-pagination
        :page-sizes="['10', '20', '50', '100']"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogOpen"
      width="90%"
      append-to-body
      :title="dialogStatus === 'create' ? '新增' : '修改'"
    >
      <create
        v-if="dialogOpen"
        @childByDialogVisible="childByDialogVisible"
        :dialogStatus="dialogStatus"
        :rowData="dataParameter"
      ></create>
    </el-dialog>
  </div>
</template>

<script>
import Panle from "@/components/Panle";
import PersButton from "@/components/PersButton";
import { fieldList, fieldUpdate } from "@/api/field/field";
import {
  listRqscQuestionaires,
  deleteRqscQuestionaires,
} from "@/api/rqscQuestionaires/rqscQuestionaires";
import Search from "@/components/common/search";
import Create from "./create";
import { allInstitution } from "@/api/institution/institution";

let PAGE_TYPE_NAME = "Gasc_Questionaires";
export default {
  components: { PersButton, Panle, Search, Create },
  data() {
    return {
      searchOptions: {
        institution_id: false,
      },
      searchForm: {
        institution_id: "",
        name: "",
        sfz: "",
      },
      searchFormObject: [
        {
          label: "机构名称",
          field: "institution_id",
          type: "select",
          options: [],
        },
        {
          label: "姓名",
          field: "name",
          type: "input",
          options: {},
        },
        {
          label: "身份证",
          field: "sfz",
          type: "input",
          options: {},
        },
      ],
      pageSize: 10, //一页显示多少条
      total: 0,
      pageNumber: 1,
      dataParameter: {},
      multipleSelection: [],
      dialogOpen: false,
      dialogStatus: "create",
      fieldList: [],
      tableData: [],
      provinceList: [],
      cityList: [],
      countyList: [],
      townList: [],
      villageList: [],
      taskList: [],
      nationList: [],
      institutionList: [],
    };
  },
  created() {
    this.getFieldList();
    this.init();
    this.getInstitutionList();
  },
  filters: {},
  methods: {
    init() {
      let role = this.$store.state.member.role;
      //省级
      if (role == 6 || role == 8 || role == 9 || role == 10) {
        //筛查人员
        this.searchForm.institution_id = parseInt(
          this.$store.state.member.institution_id
        );
        this.searchOptions.institution_id = true;
      }
      this.list();
    },

    list() {
      this.loading = true;
      let param = {
        pageSize: this.pageSize,
        page: this.page,
        name: this.searchForm.name,
        sfz: this.searchForm.sfz,
        institution_id: this.searchForm.institution_id,
      };
      console.log(param);
      listRqscQuestionaires(param).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        } else {
          this.msgError(res.msg);
        }
      });
    },
    getInstitutionList() {
      let param = {
        institution_id: this.searchForm.institution_id,
      };
      allInstitution(param).then((res) => {
        if (res.code === 200) {
          this.institutionList = res.data;
        } else {
          this.msgError(res.msg);
        }
      });
    },
    //获取字段列表
    getFieldList() {
      fieldList({ action_name: PAGE_TYPE_NAME })
        .then((result) => {
          this.fieldList = result.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 当点击checkbox时改变字段显示和隐藏
    checkBoxStatus(checked, row) {
      let params = JSON.parse(JSON.stringify(row));
      params.is_show = checked ? 1 : 0;
      fieldUpdate(params)
        .then((result) => {
          this.getFieldList();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    setSearchForm(searchForm) {
      this.searchForm = searchForm;
      this.list();
    },
    changeSearchForm(searchForm) {
      this.searchForm = searchForm;
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.list();
    },
    handleCurrentChange(e) {
      this.page = e;
      this.list();
    },
    //多选
    handleSelectionChange(e) {
      let selectChang = [];
      for (let item of e) {
        selectChang.push(item.id);
      }
      this.multipleSelection = selectChang;
    },
    //添加
    add() {
      this.dialogOpen = true;
      this.dialogStatus = "create";
    },
    //修改
    edit(row) {
      this.dialogOpen = true;
      this.dialogStatus = "update";
      this.dataParameter = row;
    },
    //删除
    del(data) {
      this.$confirm("确定删除【" + data.name + "】", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteRqscQuestionaires(data).then((res) => {
            if (res.code === 200) {
              this.msgSuccess(res.msg);
              this.list();
            } else {
              this.msgError(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // //批量删除
    // delAll() {
    //     if (this.multipleSelection.length < 1) {
    //         this.msgError("请选择数据");
    //     } else {
    //         let ids = this.multipleSelection.join(",");
    //         this.$confirm('确定删除【' + ids + '】', '提示', {
    //             confirmButtonText: '确定',
    //             cancelButtonText: '取消',
    //             type: 'warning'
    //         }).then(() => {
    //             this.multipleSelection.forEach((item) => {
    //                 deleteBanner({id: item}).then((res) => {
    //                     if (res.code === 200) {
    //                         this.msgSuccess(res.msg);
    //                         this.init();
    //                     } else {
    //                         this.msgError(res.msg);
    //                     }
    //                 })
    //             })
    //         }).catch(() => {
    //             this.$message({
    //                 type: 'info',
    //                 message: '已取消删除'
    //             });
    //         });
    //     }
    // },
    //对话框点击确定后的回调事件

    getexport() {
      let param = {
        name: this.searchForm.name,
        sfz: this.searchForm.sfz,
        institution_id: this.$store.state.member.institution_id,
      };
      window.location.href = this.setQueryPath(
        process.env.VUE_APP_API + "/data/rqscQuestionaires/expExcel",
        param
      );
    },
    setQueryPath(url, queryData) {
      var _str = "";
      for (var o in queryData) {
        _str += o + "=" + queryData[o] + "&";
      }
      var _str = _str.substring(0, _str.length - 1);
      return url + "?" + _str;
    },
    childByDialogVisible(childValue, isUpdate) {
      this.dialogOpen = childValue;
      this.dataParameter = "";
      if (isUpdate) {
        this.list();
      }
    },
  },
  watch: {
    institutionList(newVal, oldVal) {
      if (oldVal !== newVal && typeof newVal == "object") {
        newVal.forEach((e) => {
          this.searchFormObject[0].options.push({
            id: e.id,
            name: e.institution_name,
          });
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
#search,
#body,
#functional,
#page {
  padding-top: 20px;
}

.el-col {
  margin-left: 15px;
}

.addbutton {
  margin-left: -20px;
}

div.el-form-item__content {
  width: 100% !important;
}
</style>

